nodejs express制作后台引入富文本编辑器

需求

由于ueditor官方没有nodejs后台的版本，所以只有通过别的大神开发的版本使用了。故写个教程，留作以后备用。

下载ueditor

地址：http://ueditor.baidu.com/website/download.html
由于没有nodejs版本的，所以下载php版本的，通过php版本的进行修改。
博主当前下载的版本是：1.4.3.3
引入ueditor

先在express的public文件夹内创建一个ueditor目录，用于存放所有的解压出来的代码，由于本人懒，没有删除里面没有的文件，请大家自行删除。然后在模板页面中引入三个文件，分别是：

1
2
3

<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

然后在需要显示编辑器的地方放入：

1	<script id="editor" type="text/plain" style="width:100%;height:500px;"></script>

最后在js里面实例化：
1
var ue = UE.getEditor('editor');
打开页面，查看效果。
但是你打开控制台，会发现，给你提示
配置nodejs ueditor相关
上面的报错是因为我们没有配置ueditor的nodejs相关，接着我们就处理nodejs的问题。
我们在基友网站上面找到了一个叫netpi大神的解决方案，github地址：https://github.com/netpi/ueditor
制作了nodejs端的服务配置。具体操作：
首先安装模块
1
npm install ueditor --save

安装成功以后，按照大神的案例配置，在express里面的app.js里面配置

var bodyParser = require('body-parser')
var ueditor = require("ueditor")
app.use(bodyParser.urlencoded({
  extended: true
}))
app.use(bodyParser.json());

// /ueditor 入口地址配置 https://github.com/netpi/ueditor/blob/master/example/public/ueditor/ueditor.config.js
// 官方例子是这样的 serverUrl: URL + "php/controller.php"
// 我们要把它改成 serverUrl: URL + 'ue'
app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) {

  // ueditor 客户发起上传图片请求

  if(req.query.action === 'uploadimage'){

    // 这里你可以获得上传图片的信息
    var foo = req.ueditor;
    console.log(foo.filename); // exp.png
    console.log(foo.encoding); // 7bit
    console.log(foo.mimetype); // image/png

    // 下面填写你要把图片保存到的路径 （ 以 path.join(__dirname, 'public') 作为根路径）
    var img_url = 'yourpath';
    res.ue_up(img_url); //你只要输入要保存的地址 。保存操作交给ueditor来做
  }
  //  客户端发起图片列表请求
  else if (req.query.action === 'listimage'){
    var dir_url = 'your img_dir'; // 要展示给客户端的文件夹路径
    res.ue_list(dir_url) // 客户端会列出 dir_url 目录下的所有图片
  }
  // 客户端发起其它请求
  else {

    res.setHeader('Content-Type', 'application/json');
    // 这里填写 ueditor.config.json 这个文件的路径
    res.redirect('/ueditor/ueditor.config.json')
}}));

将上面的图片存储的文件夹路径自行修改，根目录是public文件夹。

修改ueditor的配置
最后找到public/ueditor/ueditor.config.js文件，将里面的URL + “php/controller.php”修改成为URL + ‘ue’
ueditor.config.json这个文件的配置，在php文件里面，从里面拿出来修改下名字将文件放在public/ueditor/即可

需求

下载ueditor

引入ueditor

配置nodejs ueditor相关

修改ueditor的配置